<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>我的设备</title>
	<link rel="stylesheet" href="css/amazeui.min.css" />
	<link rel="stylesheet" href="css/app.css" />
	<style>
		body {
				max-width: 640px;
				margin: 0 auto;
				font-size: 10px;
				background: #F2F3F8;
			}
			
			* {
				box-sizing: border-box;
			}
			
			.am-container,
			.am-u-sm-12,
			.am-u-sm-4 {
				padding: 0;
			}
			
			.rn_pay {
				width: 45%;
				height: 3.5rem;
				line-height: 3.3rem;
				text-align: center;
				border: 1px solid #0D70CF;
				border-radius: 10px;
				margin: 2rem auto;
			}
			
			.rn_pay a {
				color: #0D70CF;
				font-size: 1.3rem;
			}
			
			.myDeviceLists>div {
				display: none;
			}
			
			.myDeviceLists>.active {
				display: block;
			}
			
			.myDeviceList {
				display: flex;
				align-items: center;
				background: white;
				padding: 1.2rem;
				padding-right: 1rem;
				margin-top: 1rem;
			}
			
			.myDeviceList>img {
				width: 7rem;
				height: 7rem;
			}
			
			.myDeviceList>.f2 {
				flex: 2;
				height: 7rem;
				padding-left: 1.2rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			
			.myDeviceList>.f2>p {
				margin: 0;
				font-size: 1.6rem;
			}
			
			.myDeviceList>.f3 {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 1.4rem;
			}
			
			.pagination {
				display: flex;
				list-style: none;
			}
			
			.pagination>li:first-of-type {
				margin-left: 0;
			}
			
			.pagination>li {
				margin: 1rem 2rem;
			}
		</style>
</head>

<body>
	<header class="am-u">
		<div class="am-u-sm-12 head_nav" style="margin:0;">
			<div class="am-u-sm-2 am-vertical-align">
				<a href="mine.html">
					<img src="img/return@2x.png" class="am-vertical-align-middle" alt="">
				</a>
			</div>
			<div class="am-u-sm-8 head_text">
				我的设备
			</div>
			<div class="am-u-sm-2">

			</div>
		</div>
	</header>
	<div style="clear:both"></div>
	<div class="am-u myDeviceLists">
		<div class="md0 active" style="padding-top: 5rem;">
			<div class="am-u-sm-12" style="text-align:center;color:#808080;font-size:1.3rem;">
				暂无设备
			</div>
			<div class="am-u-sm-12">
				<div class="rn_pay">
					<a href="javascript:;">立即购买</a>
				</div>
			</div>
		</div>
		<div class="md1">

		</div>
	</div>
	<div style="clear: both;"></div>

	<div class="buttom_pages">
		<ul class="pagination" id="pagination2">
			<li class="prevPage">上一页</li>
			<li class="nextPage">下一页</li>
		</ul>
	</div>

	<script src="js/jquery.min.js" type="text/javascript"></script>

	<script>
		$(function () {
			var total = 1;
			var ary = [];
			var page = 1;
			var pagesize = 5;

			function k() {
				var d = {};
				d.method = "shop|my_machine";
				d.token = sessionStorage['token'];;
				d.pagesize = pagesize;
				d.page = page;
				$.ajax({
					type: "post",
					url: "http://www.rice.com/app/api/h5_access",
					dataType: "json",
					data: d,
					success: function (result) {
						console.log(result);
						var str = result.data.list;
						total = result.data.total;
						var html = "";
						if (total >= 1) {
							for (var i = 0; i < str.length; i++) {
								var o = str[i];
								html +=
									`
                                <div class="myDeviceList" data-orderId="${o.order_id}" onclick="my_details(this)">
                                    <img src="${o.img}" alt="name">
                                    <div class="f2">
                                        <p>${o.name}</p>
                                        <p style="color:#0367CB;">￥${o.money}</p>
                                    </div>
                                    <div class="f3">
                                        ${o.status_name}
                                        <img src="img/right123.png" alt="you">
                                    </div>
                                </div>
                            `;
							}
							$(".md0").hide();
							$(".md1").show();
							$(".md1").html(html);
						} else {
							$(".md0").show();
							$(".md1").hide();
						}
					}

				})
			}
			k();
			$(".prevPage").on("click", function () {
				if (page > 1) {
					page -= 1;
					k();
				}
			})
			$(".nextPage").on("click", function () {
				if (page < total) {
					page += 1;
					k();
				}
			})

			$('.rn_pay').on('click', function () {
				alert("请前往app进行购买")
			})


		})

		function my_details(obj) {
			var _this = obj
			var $orderId = $(_this).attr('data-orderId');
			console.log($orderId)
			sessionStorage.setItem("order_id", $orderId);
			window.location.href = "mydevice_details.html"
		}
	</script>
</body>

</html>